<template>
    <div>
        <div class="search">
            <div class="container">
                <div class="head">
                    <div class="iconfont" @click="$router.back()">
                        &#xe624;
                    </div>
                    <div class="sear_wrap">
                        <div class="iconfont">
                            &#xeb86;
                        </div>
                        <input type="text" placeholder="周末宅家做美食" v-model="inp.val">
                    </div>
                    <span @click="search(inp.val)">搜索</span>
                </div>
                <div class="history" v-show="(inp.history != 0)">
                    <h2>历史搜索</h2>
                    <ul>
                        <li v-for="(item,index) in inp.history" @click="go(item)" :key="index">{{item}}</li>
                        
                    </ul>
                    <div class="iconfont" @click="del">
                        &#xe74b;
                    </div>
                </div>
                <div class="history hot">
                    <h2>热门搜索</h2>
                    <ul>
                        <li :class="[item.type == 1 ? 'hot' : '']" 
                        v-for="(item,index) in inp.suggests" 
                        :key="index"
                        @click="go(item.name)">{{item.name}}</li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { reactive } from '@vue/runtime-core'
import { useStore } from "../store/index";
export default {
    setup(){
            let store = useStore(); 
            let router = useRouter();
            let inp = reactive({
                val:'',
                history: store.search_history,
                suggests:[
                    {
                        name:"中小学生学做饭",
                        type:1
                    },
                    {
                        name:"最新菜谱",
                        type:1
                    },
                    {
                        name:"懒人一锅出",
                        type:1
                    },
                    {
                        name:"清炒时蔬",
                        type:2
                    },
                    {
                        name:"居家快手餐",
                        type:2
                    },
                    {
                        name:"空气炸锅美食",
                        type:1
                    },
                    {
                        name:"早餐食谱",
                        type:1
                    },
                    {
                        name:"萝卜",
                        type:2
                    },
                    {
                        name:"火锅",
                        type:1
                    },
                    {
                        name:"大白菜",
                        type:2
                    }
                ]
            })
        console.log(store.search_history);
            function his(val) {
                store.search_history.push(val);
            }
            function search(val) {
                his(val);
                go(val);
            }
            function go(val) {
                store.search = val;
                router.push({
                    path:'/searlist',
                    query:{
                        id:val
                    }
                })
            }
            function del() {
                store.search_history = [];
                inp.history = [];
            }
            return{
                router,
                inp,
                go,
                del,
                search
            }
        }
    }
</script>

<style lang="scss" scoped>
.search{
    .head{
        padding: 10px 16px 30px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &>.iconfont{
            font-size: 20px;
            color: #000;
        }
        .sear_wrap{
            position: relative;
            width: 230px;
            padding-left: 30px;
            background-color: #F6F6F6;
            height: 40px;
            &>.iconfont{
                position: absolute;
                top: 10px;
                left: 6px;
                font-size: 20px;
                color: #909090;
            }
            input{
                border: 0px;
                background-color: #F6F6F6;
                width: 100%;
                height: 100%;
            }
        }
        span{
            font-size: 13px;
            color: #333;
        }
    }
    .history{
        padding: 0 16px 16px;
        position: relative;
        h2{
            font-size: 15px;
            color: #333;
            height: 44px;
            line-height: 44px;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                padding: 4px 10px;
                font-size: 13px;
                margin: 0 10px 12px 0;
                color: #828282;
                background-color: #FDFDFD;
                border: 2px solid #FDFDFD;
                border-radius: 4px;
            }
            .hot{
                border-color: #C87866;
                color:#C87866;
            }
        }
        &>.iconfont{
            color: #878787;
            font-size: 18px;
            position: absolute;
            right: 16px;
            top: 12px;
        }
    }
}
</style>